键盘导航的 JavaScript 组件

IE 不会触发非字母数字键的 keypress 事件。使用 onkeydown 替代。

为了确保不同输入设备的用户体验一致，键盘和鼠标事件处理程序在适当的情况下应该共享代码。例如，当用户使用方向键导航的时候，一些代码会更新相应元素的 tabindex 或风格，用鼠标点击也应该有同样的变化。

要确保键盘可以激活元素，所有鼠标事件的绑定也同时要绑定到键盘事件上。例如，为了确保回车键能激活某个元素，如果你使用了 onclick="DoSomething()"， 你需要把 doSomething() 绑定到 key down 事件上：onkeydown="return event.keyCode != 13 || doSomething();".

IE 7 及更早版本不支持 :focus 伪选择器，不要用它来设置焦点的样式。替代方法是在 onfocus事件处理程序中设置样式，例如，添加一个 CSS 样式到 class 属性中。

IE 不会自动为tabindex="-1"的元素绘制聚焦框。可以选择一种方法解决，比如通过 this.style.backgroundColor="gray" 改变选中项目的背景颜色，或通过 this.style.border="1px dotted invert" 添加虚线边框。如果使用虚线边框的，需要确保这些元素有隐含的一象素边框，这样，当聚焦的边框样式应用上去的时候，元素的大小才不会改变（边框会占用空间，而 IE 没有实现 CSS outline）。

如果你用自己的插件处理按键事件，可以通过事件处理程序的返回值来阻止浏览器的缺省处理（例如，响应方向键的滚动）。如果你的事件处理程序返回 false，事件就不会冒泡到处理程序外面。

例如：

html

如果 handleKeyDown() 返回 false，将会结束事件处理，阻止浏览器继续处理按键行为。

非常不幸，onkeydown 连发或不连发取决于代码执行的浏览器和操作系统。